<template>
  <view class="tabBottom">
    <view class="categoryMain">
      <view :class="['categoryItem', state.tabName === item ? 'categoryItemHover' : '']" v-for="(item, index) in majorList" :key="index" @click="changeTab2(item)">
        {{item == null ? '全' : item}}
      </view>
    </view>
    <scroll-view class="list" scroll-y="true" @scrolltolower="loadMoreData" :style="{height: `${calculateHeight}px`}">
      <view :class="['listItem', item?.teacher_status == 2 ? 'listItemYellow' : '' , item?.teacher_status == 3 ? 'listItemRed' : '' ]" v-for="(item, index) in teacherInfo?.list" :key="index">
        <view class="itemLeft" @click="openPopup(item)">
          <image :src="item?.head_img"></image>
          <view class="right">
            <view class="h3">{{item?.nickname}}</view>
            <view class="p">ID:{{item?.id}}</view>
          </view>
        </view>
        <view class="itemRight">
          <view class="item">
            <view class="top">
              <image src="/static/icon_img05.png"></image>
              <text>未交初稿</text>
            </view>
            <view class="num">{{item?.one}}</view>
          </view>
          <view class="item">
            <view class="top">
              <image src="/static/icon_img06.png"></image>
              <text>需修改</text>
            </view>
            <view class="num">{{item?.two}}</view>
          </view>
          <view class="item">
            <view class="top">
              <image src="/static/icon_img07.png"></image>
              <text>需降重定稿</text>
            </view>
            <view class="num">{{item?.three}}</view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
  <uni-popup ref="popup">
    <view class="pop-content" :style="{border: `6rpx solid ${state.borderColor}`} ">
      <uni-icons type="close" size="30" color="rgba(254, 34, 34, 1)" class="popClose" @click="closePopup"></uni-icons>
      <view class="pop-head">
        <image :src="state.detail?.head_img" />
        <view class="right">
          <view class="h3">{{state.detail?.nickname}}</view>
          <view class="p">ID:{{state.detail.id}}</view>
        </view> 
      </view>
      <view class="pop-part1">
        <view class="item">
            <view class="top">
              <image src="/static/icon_img05.png"></image>
              <text>未交初稿</text>
            </view>
            <view class="num">{{state.detail?.one}}</view>
          </view>
          <view class="item">
            <view class="top">
              <image src="/static/icon_img06.png"></image>
              <text>需修改</text>
            </view>
            <view class="num">{{state.detail?.two}}</view>
          </view>
          <view class="item">
            <view class="top">
              <image src="/static/icon_img07.png"></image>
              <text>需降重定稿</text>
            </view>
            <view class="num">{{state.detail?.three}}</view>
          </view>
        
      </view>
      <view class="pop-part2">
        <view class="formItem">
          <view class="label">专业:</view>
          <view class="itemRight">
            <view class="itemInput">
              <uni-easyinput v-model="state.detail.major_one" @change="changeOne" style="width: 90px;"></uni-easyinput>
            </view>
            <view class="itemInput">
              <uni-easyinput v-model="state.detail.major_two" @change="changeTwo" style="width: 90px;"></uni-easyinput>
            </view>
            <view class="itemInput">
              <uni-easyinput v-model="state.detail.major_three" @change="changeThree" style="width: 90px;"></uni-easyinput>
            </view>
          </view>
        </view>
        <view class="formItem">
          <view class="label">软件:</view>
          <view class="itemRight">
            <uni-easyinput v-model="state.detail.strong_point" @change="changeFour" style="flex:1;"></uni-easyinput>
          </view>
        </view>
        <view class="formItem">
          <view class="label">老师状态:</view>
          <view class="itemRight">
            <uni-tag :circle="true" :inverted="state.inverted" text="稳定老师" type="warning" @click="setInverted" style="margin-right: 10px"/>
            <uni-tag :circle="true" :inverted="state.inverted2" text="已开除" type="error" @click="setInverted2" />
          </view>
        </view>
      </view>
      <view class="pop-part3">
        <view class="item">
          <view class="text02">总款项</view>
          <view class="text01">
            <text class="span01">工:</text>
            <text class="span02">{{state.detail?.total_order_price_gong}}</text>
            <text>元</text>
          </view>
          <view class="text01">
            <text class="span01">文:</text>
            <text class="span02">{{state.detail?.total_order_price_wen}}</text>
            <text>元</text>
          </view>
        </view>
        <view class="item">
          <view class="text02">订单数</view>
          <view class="text01">
            <text class="span01">工:</text>
            <text class="span02">{{state.detail?.order_num_gong}}</text>
          </view>
          <view class="text01">
            <text class="span01">文:</text>
            <text class="span02">{{state.detail?.order_num_wen}}</text>
          </view>
        </view>
        <view class="item">
          <view class="text02">已结款</view>
          <view class="text01">
            <text class="span01">工:</text>
            <text class="span02">{{state.detail?.yet_price_gong}}</text>
            <text>元</text>
          </view>
          <view class="text01">
            <text class="span01">文:</text>
            <text class="span02">{{state.detail?.yet_price_wen}}</text>
            <text>元</text>
          </view>
        </view>
      </view>
      <view class="submit" @click="clickSubmit">保存</view>
    </view> 
  </uni-popup>
</template>

<script setup>
  import { tabs2 } from '../data.js'
  import { ref, reactive, onMounted, nextTick, computed } from 'vue'
  import { onLoad, onShow } from '@dcloudio/uni-app'
  import { getTeacherList, editTeacherInfo, getTeacherInfo } from '@/utils/admin.js'
  const popup = ref(null)
  const state = reactive({
    tabId: null,
    page:  1,
    tabName: null,
    currentItem: {},
    inverted: false,
    inverted2: false,
    borderColor: '#ffffff',
    detail: {}
  })
 
  onShow(() => {
    console.log(179)
    emits('getTeacherInfo', {tabId: state.tabName, page: state.page})
  })
  const emits = defineEmits(['getTeacherInfo'])
  const props = defineProps({
    list: {
      type: Object,
      default: () => ({})
    },
    teacherInfo: {
      type: Object,
      default: () => ({})
    },
    scrollHeight:{
      type: Number,
      default: () => 0
    },
    majorList: {
      type: Array,
      default: () => ([])
    }
  })
  
  // 计算剩余高度的函数
  const calculateHeight = computed(() => {
    // 假设需要减去的固定高度为 34rpx，转换为 px
    const fixedHeight = uni.upx2px(100); // 将 rpx 转换为 px
    return props.scrollHeight - fixedHeight;
  });
  // 滚动加载数据
  const loadMoreData = () => {   
    // 模拟请求数据
    setTimeout(() => { 
      state.page ++
      const pageNum = props.teacherInfo?.total / 20
      // 假设第 3 页是最后一页
      if (state.page > pageNum) {
        // this.hasMore = false; // 没有更多数据
      } else {
        emits('getTeacherInfo', {tabId: state.tabName, page: state.page})
      }
    }, 1000);
  }
  const changeOne = (e) => {
    state.detail.major_one = e
  }
  const changeTwo = (e) => {
    state.detail.major_two = e
  }
  const changeThree = (e) => {
    state.detail.major_three = e
  }
  const changeFour = (e) => {
    state.detail.strong_point = e
  }
  // 点击稳定老师
  const setInverted = () => {
    state.inverted = !state.inverted;
    state.inverted2 = !state.inverted2;
    if (state.inverted) {
      state.detail.teacher_status = 2
      state.borderColor = "rgba(255, 184, 19, 1)"
    } else {
      state.detail.teacher_status = 1
      state.borderColor = "rgba(255, 255, 255, 1)"
    }
  }
  // 点击已删除老师
  const setInverted2 = () => {
    state.inverted2 = !state.inverted2;
    state.inverted = !state.inverted;
    if (state.inverted2) {
      state.detail.teacher_status = 3
      state.borderColor = "rgba(255, 45, 45, 1)"
    } else {
      state.detail.teacher_status = 1
      state.borderColor = "rgba(255, 255, 255, 1)"
    }
  }
  // 点击底部工文tab
  const changeTab2 = (item) => {
    if (item == state.tabName) {
      return;
    }
    state.tabName = item
    nextTick(() => {
      emits('getTeacherInfo', {tabId: item, page: 1})
    })
  }
  const openPopup = (item) => {
    console.log(119, item)
    getTeacherInfo({id: item.id}).then((res) => {
      if (res?.code == 1) {
        state.detail = res?.result
        if (res?.result?.teacher_status == 2) {
          state.inverted = true
          state.inverted1 = false
          state.borderColor = "rgba(255, 184, 19, 1)"
        } else if (res?.result?.teacher_status == 3) {
          state.inverted1 = true
          state.inverted = false
          state.borderColor = "rgba(255, 45, 45, 1)"
        } else {
          state.inverted = false
          state.inverted1 = false
          state.borderColor = "rgba(255, 255, 255, 1)"
        }
      }
    })
    state.borderColor = item.teacher_status == 2 ? "rgba(255, 184, 19, 1)" : item.teacher_status == 3 ? "rgba(255, 45, 45, 1)" :"rgba(255, 255, 255, 1)"
    popup.value.open()    
  }
  const closePopup = () => {
    popup.value.close()
  }
  const clickSubmit = () => {
    const { id, teacher_status, strong_point, major_one, major_two, major_three } = state.detail
    let params = {
      id,
      teacher_status,
      strong_point,
      major_one,
      major_two,
      major_three
    }
    editTeacherInfo(params).then((res) => {
      if (res?.code == 1) {
        state.page = 1
        emits('getTeacherInfo', {tabId: '', page: 1})
        popup.value.close()
        uni.showToast({
          title: '修改成功',
          icon: 'none'
        })
      }
    })
  }
</script>

<style lang="scss" scoped>
  .tabBottom{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 30rpx;
    width: 714rpx;
    .categoryMain{
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      width: 100%;
      border-bottom: 2rpx dashed rgba(65, 65, 65, 1);
      padding-bottom:30rpx;
      .categoryItem{
        height: 34rpx;
        border-radius: 6rpx;
        border: 2rpx solid rgba(107, 107, 107, 1); 
        font-family: HarmonyOS Sans SC;
        font-weight: 400;
        font-size: 24rpx;
        color: rgba(122, 122, 122, 1);
        margin-left: 10rpx;
        margin-right: 10rpx;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        padding-left: 10rpx;
        padding-right: 10rpx;
      }
      .categoryItemHover{
        border: 2rpx solid rgba(11, 105, 218, 1);
        background: rgba(209, 218, 243, 1);
        color: rgba(11, 105, 218, 1);
      }
    }
    .list{
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      // height: calc(100vh - 800rpx);
      .listItem{
        width: 714rpx;
        height: 142rpx;
        border-radius: 14rpx;
        background: rgba(255, 255, 255, 1);
        margin-top:20rpx;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        .itemLeft{
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          margin-left: 20rpx;
          image{
            width: 102rpx;
            height: 102rpx;
            background: rgba(217, 217, 217, 0.61);
            border-radius: 100%;
          }
          .right{
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin-left: 20rpx;
            .h3{
              font-family: PingFang SC;
              font-weight: 500;
              font-size: 32rpx;
              color: rgba(70, 70, 70, 1);
            }
            .p{
              font-family: PingFang SC;
              font-weight: 500;
              font-size: 28rpx;
              line-height: 46rpx;
              color: rgba(169, 169, 169, 1);
          
            }
          }
        }
        .itemRight{
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          .item{
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-right: 40rpx;
            .top{
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              image{
                width:38rpx;
                height:38rpx;
              }
              text{
                font-family: PingFang SC;
                font-weight: 500;
                font-size: 16rpx;
                color: rgba(35, 35, 35, 0.52);
                margin-top:10rpx;
              }
            }
            .num{
              font-family: PingFang SC;
              font-weight: 300;
              font-size: 30rpx;
              color: rgba(62, 62, 62, 1);
            }
          }
        }
        
      }
      .listItemYellow{
        border: 6rpx solid rgba(255, 184, 19, 1)
      }
      .listItemRed{
        border: 6rpx solid rgba(255, 45, 45, 1)
      }
    }
  }
  .pop-content{
    width: 714rpx;
    min-height: 704rpx;
    background-color: #ffffff;
    border: 2rpx solid #ffffff;
    border-radius: 30rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    padding-bottom: 20rpx;
    padding-top: 20rpx;
    .popClose{
      position: absolute;
      right: 20rpx;
      top: 20rpx;
    }
    .pop-head{
      width: 596rpx;
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      position: relative;
      border-bottom: 2rpx solid rgba(0, 0, 0, 1);
      padding-top: 40rpx;
      padding-bottom: 20rpx;
      image{
        width: 102rpx;
        height: 102rpx;
        border-radius: 100%;
        margin-right: 28rpx;
        background: rgba(255, 184, 18, 1);
      }
      .right{
        display: flex;
        flex-direction: column;
        align-items: center;
        .h3{
          font-family: PingFang SC;
          font-weight: 500;
          font-size: 32rpx;;
        }
        .p{
          font-family: PingFang SC;
          font-weight: 500;
          font-size: 28rpx;
          color: rgba(169, 169, 169, 1);
        }
      }
      
    }
    .pop-part1{
      width: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      margin-top: 30rpx;
      .item{
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-right: 40rpx;
        .top{
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          image{
            width:38rpx;
            height:38rpx;
          }
          text{
            font-family: PingFang SC;
            font-weight: 500;
            font-size: 16rpx;
            color: rgba(35, 35, 35, 0.52);
            margin-top:10rpx;
          }
        }
        .num{
          font-family: PingFang SC;
          font-weight: 300;
          font-size: 30rpx;
          color: rgba(62, 62, 62, 1);
        }
      }
      
    }
    .pop-part2{
      width: 100%;
      display: flex;
      flex-direction: column;
      .formItem{
        width: 98%;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        margin-top: 20rpx;
        align-items: center;
        .label{
          font-family: PingFang SC;
          font-weight: 500;
          font-size: 16rpx;
          color: rgba(35, 35, 35, 0.52);
          width: 80rpx;
          text-align: right;
          flex-shrink: 0;
          margin-right: 10rpx;
        }
        .itemRight{
          display: flex;
          flex-direction: row;
          flex:1;
          justify-content: center;
          .itemInput{
            width: 200rpx;
            margin-right: 10rpx;
          }
        }
      }
    }
    .pop-part3{
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-around;
      width: 100%;
      margin-top: 40rpx;
      .item{
        width: 214rpx;
        height: 148rpx;
        border-radius: 20rpx;
        background: linear-gradient(180deg, #E8EDF3 0%, #CFD8F3 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        .text02{
          font-family: PingFang SC;
          font-weight: 500;
          font-size: 24rpx;
          color: rgba(35, 35, 35, 0.52);
        }
        .text01{
          display: flex;
          flex-direction: row;
          align-items: center;
          // margin-top: 10rpx;
          text{
            font-family: HarmonyOS Sans SC;
            font-weight: 400;
            font-size: 24rpx;
            color: rgba(35, 35, 35, 0.54);
          }
          .span01{
            font-family: HarmonyOS Sans SC;
            font-weight: 400;
            font-size: 24rpx;
            color: rgba(35, 35, 35, 1);
          }
          .span02{
            font-family: PingFang SC;
            font-weight: 600;
            font-size: 40rpx;
            color: rgba(35, 35, 35, 1);
          }
        }
      }
    }
    .submit{
      width: 98rpx;
      height: 56rpx;
      border-radius: 10rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      background: rgba(135, 255, 124, 1);
      margin-top: 20rpx;
    }
  }
</style>